<template>
	<view class="lay-root">
		<view class="lay-input-root" v-if="layType == 'input'">
			<view class="input-title">
				<text>{{inputData.cnName}}</text>
			</view>

			<view class="input-value">
				<input class="input-text-input" :type="inputData.layInputType" :maxlength="inputMaxlength"
					:placeholder="inputPlaceholder" placeholder-class="input-text-input-placehold"
					@input="onInputChanged" :password="isInputPwd" v-model="inputStr" adjust-position="true"
					cursor-spacing="20"></input>
			</view>
		</view>

		<view class="lay-input-root" v-if="layType == 'showstring'">
			<view class="input-title">
				<text>{{inputData.cnName}}</text>
			</view>

			<view class="input-value">
				<text class="input-text-input">{{inputData.inputValue}}</text>
			</view>
		</view>

		<view class="lay-input-root" v-if="layType == 'date'">
			<view class="input-title">
				<text>{{inputData.cnName}}</text>
			</view>

			<view class="input-value">
				<picker mode="date" :value="pickDate" @change="bindDateChange">
					<view :class="pickDate.length == 0 ? 'input-text-input-placehold':'input-text-input'">
						{{pickDate.length > 0 ? pickDate : '未选择'}}
					</view>
				</picker>
			</view>
		</view>

		<view class="lay-input-root" v-if="layType == 'selection'">
			<view class="input-title">
				<text>{{inputData.cnName}}</text>
			</view>

			<view class="input-value">
				<picker @change="bindPickerChange" :value="pickerIndex" :range="inputData.pickerArray.children"
					range-key="label">
					<view :class="pickerIndex == -1 ? 'input-text-input-placehold':'input-text-input'">
						{{pickerIndex == -1 ?'未选择' :  pickerStr}}
					</view>
				</picker>
			</view>
		</view>

		<view class="lay-input-root" v-if="layType == 'qrcode'">
			<view class="input-title">
				<text>{{inputData.cnName}}</text>
			</view>

			<view class="input-value" @click="onQrClick">
				<text :class="scanQrCode.length == 0 ? 'input-text-input-placehold':'input-text-input'">
					{{scanQrCode.length == 0 ? "请扫码": scanQrCode }}</text>
				<image class="lay-qr-img" src="/static/gen_qr/icon_scan@2x.png"></image>

			</view>
		</view>

		<view v-if="layType == 'uploadImg'">
			<view class="lay-input-root colum-lay">
				<view class="input-title">
					<text>{{inputData.cnName}}</text>
				</view>
			</view>

			<easy-upload :dataList="dataList" :uploadUrl="uploadImgUrl" :types="types" :uploadCount="4"
				@successImage="successImage" :autoUpload="true" :uploadParams="genUploadParams" />
		</view>
		<view class="col-cutoff"></view>
	</view>
</template>

<script>
	import easyUpload from "@/components/easy-upload/easy-upload.vue"

	import {
		uploadFileUrl,
		getQRData
	} from "@/service/services.js"
	export default {
		components: {
			easyUpload
		},

		props: {
			layType: {
				type: String
			},

			inputData: {
				type: Object
			},

			entity: {
				type: String,
				default: ""
			}
		},

		data() {
			return {
				pageTitle: "pagetitle",

				// layType: "input", // 收集类型 输入框
				inputMaxlength: 20, // 输入的长度
				inputPlaceholder: "请输入",
				isInputPwd: false,
				inputStr: '', // 输入的string	
				pickDate: "",

				pickerIndex: -1,
				pickerStr: '',
				pickerArray: [],

				scanQrCode: '',

				dataList: [],
				types: 'image',
				uploadImgUrl: uploadFileUrl
			};
		},

		computed: {
			getPickData() {
				return this.inputData.pickerArray.children[this.pickerIndex].label;
			},

			genUploadParams() {
				let re = {};
				re.entity = this.entity;
				return re
			}
		},

		mounted() {
			// debugger
			// console.log("mounted")
			// console.log(this.inputData)
		},

		methods: {
			onInputValueChange(e) {
				// 返回选中的值
				// debugger
				this.$emit("onInputValueChange", e)
			},


			onInputChanged(e) {
				let keyValue = {};
				// keyValue[this.inputData.name] = this.inputStr;
				keyValue.key = this.inputData.name;
				keyValue.value = this.inputStr;
				this.onInputValueChange(keyValue);
			},

			bindDateChange(e) {
				this.pickDate = e.detail.value;
				let keyValue = {};
				// keyValue[this.inputData.name] = this.pickDate;
				keyValue.key = this.inputData.name;
				keyValue.value = this.pickDate;
				this.onInputValueChange(keyValue);
			},

			bindPickerChange(e) {
				this.pickerIndex = e.detail.value
				let keyValue = {};
				this.pickerStr = this.inputData.pickerArray.children[this.pickerIndex].label;
				// keyValue[this.inputData.name] = this.inputData.pickerArray.children[this.pickerIndex].value;
				keyValue.key = this.inputData.name;
				keyValue.value = this.inputData.pickerArray.children[this.pickerIndex].value;
				this.onInputValueChange(keyValue);
			},

			onQrClick() {
				let _self = this
				// #ifdef APP-PLUS
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						_self.scanQrCode = res.result;
						// _self.bindScanChange();
						_self.requireQRCodeContent();
					}
				});
				// #endif

				// #ifdef H5
				_self.scanQrCode = `{"entity":"OrgUserEntity","id":"8"}`
				_self.requireQRCodeContent();
				// _self.bindScanChange();
				// #endif
			},

			bindScanChange() {
				let keyValue = {};
				keyValue.key = this.inputData.name;
				keyValue.value = this.scanQrCode;
				this.onInputValueChange(keyValue);
			},

			successImage(e) {
				// this.onInputValueChange(keyValue);
				let re = "";
				for (let i = 0; i < e.length; i++) {
					re += e[i].reUrl;
					if (i != e.length - 1) {
						re += ",";
					}
				}

				let keyValue = {};
				keyValue.key = this.inputData.name;
				keyValue.value = re;

				this.onInputValueChange(keyValue);
			},

			requireQRCodeContent() {
				let _self = this;
				let tempObj = JSON.parse(this.scanQrCode);
				getQRData(tempObj).then(res => {
					console.log(res)
					// if(res.data[_self.inputData.qrKey] != null ){
					// 	_self.scanQrCode = res.data[_self.inputData.qrKey];
					// 	this.bindScanChange();
					// } else {
					// 	_self.scanQrCode = '';
					// 	this.bindScanChange();					
					// }
					_self.findScanValue(res.data)
				})
			},

			findScanValue(e) {
				if (e[this.inputData.qrKey] != null) {
					this.scanQrCode = e[this.inputData.qrKey];
					this.bindScanChange();
				} else {
					this.scanQrCode = '';
					// #ifdef H5
					this.scanQrCode = 'test_code';
					// #endif
					this.bindScanChange();
				}
			}


		}
	}
</script>

<style lang="scss" scoped>
	.lay-root {
		display: flex;
		flex-direction: column;
	}

	.lay-input-root {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 32upx;
		justify-content: space-between;



		.input-title {
			// background-color: #4CD964;
			width: 300upx;
		}

		.input-value {
			display: flex;
			flex-direction: row;
			align-items: center;
			// display: inline;
			// float: right;

			.input-text-input {
				// width: 100%;
				font-size: 30upx;
				color: #000000;
				text-align: right;
				background-color: rgba(0, 0, 0, 0);
				border: rgba(0, 0, 0, 0);
			}

			.input-text-input:focus {
				outline: none;
				border: 0px solid #fff;
			}

			.input-text-input-placehold {
				// width: 100%;
				font-size: 30upx;
				text-align: right;
				color: #9B9B9B;
			}


			.lay-qr-img {
				margin-left: 20upx;
				width: 40upx;
				height: 42upx;
			}
		}
	}

	.col-cutoff {
		width: 100%;
		height: 1upx;
		background-color: #F5F5F5;
	}
</style>
